
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
    <title></title>
	<script type="text/javascript" src="../js/jquery1.9.1.min.js"></script>
		<script type="text/javascript" src="../js/jquery.mobile-1.3.2.min.js"></script>
		<link rel="stylesheet" href="../css/jquery.mobile-1.3.2.min.css"/> 
</head>
<body>
 <div data-role="page" ><!--page2-->
<div data-role="header" data-position="fixed"><h1>Page2</h1>
<a href="../../shelf/AllSection.html" rel="external" data-icon="back" data-iconpos="left" data-transition="slidefade" data-direction="reverse" class="ui-btn-left">返回</a>
</div><!--header-->
<div data-role="footer" data-position="fixed"><h1>End</h1></div><!--footer-->
<style type="text/css">
.mysvg
{
  -webkit-animation:r1 5s linear infinite;
  -o-animation:r1 5s linear infinite;
  -moz-animation:r1 5s linear infinite;
  animation:r1 5s linear infinite;
}
.mysvg:hover, .c1:hover, .c1:hover + .c2
{
    -webkit-animation-play-state:paused;
    -o-animation-play-state:paused;
    -moz-animation-play-state:paused;
    animation-play-state:paused;
}
.c1
{
  position : absolute;
  left:20px;
  top:10px;
  -webkit-animation:r1 24s linear infinite;
  -o-animation:r1 24s linear infinite;
  -moz-animation:r1 24s linear infinite;
  animation:r1 24s linear infinite;
  z-index:20;
}
.c2
{
  position : absolute;
  left:40px;
  top:30px;
  -webkit-animation:r2 25s linear infinite;
  -o-animation:r2 25s linear infinite;
  -moz-animation:r2 25s linear infinite;
  animation:r2 25s linear infinite;
  z-index:10;
}

@-webkit-keyframes r1 {100% { -webkit-transform: rotate(-360deg); }}
@-o-keyframes r1 {100% { -o-transform: rotate(-360deg); }}
@-moz-keyframes r1 {100% { -moz-transform: rotate(-360deg); }}
@keyframes r1 {100% { transform: rotate(-360deg); }}

@-webkit-keyframes r2 {100% { -webkit-transform: rotate(360deg); }}
@-o-keyframes r2 {100% { -o-transform: rotate(360deg); }}
@-moz-keyframes r2 {100% { -moz-transform: rotate(360deg); }}
@keyframes r2 {100% { transform: rotate(360deg); }}


.d1
{
    padding:20px;
    background: -webkit-linear-gradient(90deg, #fff 1%,transparent 2%,transparent 80%,#fff 81%),
    -webkit-linear-gradient(0deg , #fff 1%,transparent 2%,transparent 80%,#fff 81%);
    background: -o-linear-gradient(90deg, #fff 1%,transparent 2%,transparent 80%,#fff 81%),
    -o-linear-gradient(0deg , #fff 1%,transparent 2%,transparent 80%,#fff 81%);
    background: -moz-linear-gradient(90deg, #fff 1%,transparent 2%,transparent 80%,#fff 81%),
    -moz-linear-gradient(0deg , #fff 1%,transparent 2%,transparent 80%,#fff 81%);
    background: linear-gradient(90deg, #fff 1%,transparent 2%,transparent 80%,#fff 81%),
    linear-gradient(0deg , #fff 1%,transparent 2%,transparent 80%,#fff 81%);
    background-color: #bbb;
    background-size: 20px 20px;
}

</style>

<h1>SVG & CSS 3</h2>
    <h2>Animation 1</h2>
    <div class="d1">
        <svg class="mysvg" width="98px" height="84px" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <circle fill="none" cx="70" cy="30" r="25" stroke="#825" stroke-width="5"/>
        <circle fill="none" cx="50" cy="55" r="25" stroke="#492" stroke-width="5"/>
        <circle fill="none" cx="30" cy="30" r="25" stroke="#246" stroke-width="5"/>
    </svg>
    </div>
    <h2>
        Animation 2</h2>
    <div style="height:190px;position:relative;">
        <svg class="c1" width="150" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <mask id="msk1">
        <rect width="150" height="150" fill="#fff"/>  
        <circle fill="#000" cx="50" cy="50" r="18" />
        <circle fill="#000" cx="100" cy="50" r="18" />
        <circle fill="#000" cx="75" cy="93" r="18" />
      </mask>
	    <rect width="150" height="150" mask="url(#msk1)" fill="#fff"/>  
    </svg>
        <svg class="c2" width="102" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <circle fill="#111" cx="25" cy="25" r="18" />
      <circle fill="#111" cx="76" cy="25" r="18" />
      <circle fill="#111" cx="50" cy="70" r="18" />
    </svg>
    </div>
</div>
</body>
</html>
